<template>
    <div class="main">
        <div class="left">
            <article-item v-for="item in ArticleList" :key="item.id" :item="item"></article-item>
        </div>
        <div class="right">
            <hot-article></hot-article>
        </div>
        
    </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import HotArticle from '@/components/HotArticle.vue'
import { getArticle } from '@/api'
export default {
    components:{
        ArticleItem,
        HotArticle
    },
    data(){
        return{
            zan:0,
            cai:0,
            isZan:false,
            isCai:false,
            ArticleList:[],
            hotArticle:[]
        }
    },
    methods:{
        addZan(){
            if(this.isZan === false){
                this.zan++
                this.isZan = true
            }
        },
        addCai(){
            if(this.isCai === false){
                this.cai++
                this.isCai = true
            }
        },
    },
    mounted(){
        getArticle().then(res => {
            let ArticleList = res.data
            this.ArticleList = ArticleList
            let hotArticle = []
            for(let i = 0; i < 2; i++){
                hotArticle.push(ArticleList[i])
            }
            this.$store.commit('setHotArticle', hotArticle)
        })
    }
}
</script>

<style lang="less" scoped>
.main{
    display: flex;
    .left{
        width: 75%;
    }
    .right{
        width: 25%;
    }
}

</style>